import React from 'react';
import {StyleSheet, Image, Text, View, ActivityIndicator, FlatList, RefreshControl} from 'react-native';
import {List, Flex, WhiteSpace, Toast} from '@ant-design/react-native';
import {getShareNewsList} from '~/api/share';
import moment from 'moment';
import {connect} from 'react-redux';
const Item = List.Item;
let index = 1;
let size = 10;
const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
    };
};
class VideoPark extends React.Component {
    static navigationOptions = ({navigation}) => {
        let title = '';
        if (navigation.state.params) {
            title = navigation.state.params.title;
        }
        return {tabBarLabel: title};
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        // 设置当前组件的属性
        this.state = {
            id: this.props.navigation.getParam('id') || 5,
            show: this.props.navigation.getParam('show'),
            is_loading: true, //加载
            is_next: true,
            refreshing: false,
            footer: 0, //上拉底部显示
            kind_id: 5,
            url: global.AppData.base_url,
            list: [],
        };
        console.disableYellowBox = true;
    }

    componentDidMount() {
        this.initData();
    }

    initData = () => {
        index = 1;
        this.state.is_next = true;
        this.state.list = [];
        this.getNewsList();
    };

    getNewsList() {
        this.setState({is_loading: true});
        getShareNewsList({
            page_index: index++,
            page_size: size,
            kind_id: this.state.id,
            identity: this.props.userinfo.identity,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({is_loading: false});
                if (r.data.list.length > 0) {
                    this.setState({
                        list: this.state.list.concat(r.data.list),
                    });
                } else {
                    this.setState({
                        is_next: false,
                    });
                }
            } else {
                Toast.info(r.msg, 1);
            }
        });
    }

    _onRefresh() {
        this.initData();
    }

    //上拉加载更多
    loadData = () => {
        if (this.state.is_next) {
            this.getNewsList();
        }
    };

    //上拉底部显示
    genIndicator() {
        return (
            <>
                {this.state.show !== 0 ? (
                    this.props.userinfo.identity !== 21 ? (
                        <Flex
                            style={{backgroundColor: '#FFFFFF', marginTop: 5}}
                            onPress={() => {
                                this.props.navigation.push('VideoPark', {
                                    id: this.props.userinfo.identity === 8 ? 8 : 9,
                                    show: 0,
                                });
                            }}>
                            <Flex style={{width: '60%', height: 112}} justify="between" align="start" direction="column">
                                <Text style={{fontSize: 16, marginLeft: 20, marginTop: 10}}>
                                    {this.props.userinfo.identity === 8 ? '买车位前请先认识车位' : '大卖车位三十六计'}
                                </Text>
                            </Flex>
                            <View style={styles.image}>
                                {this.props.userinfo.identity === 8 ? (
                                    <Image style={styles.image} source={require('~/assets/public/renshi.png')} />
                                ) : (
                                    <Image style={styles.image} source={require('~/assets/public/sanshiliu.png')} />
                                )}
                            </View>
                        </Flex>
                    ) : null
                ) : null}
                {this.state.is_loading && (
                    <View style={styles.indicatorContainer}>
                        <ActivityIndicator style={styles.indicator} size="small" animating={true} />
                        <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                    </View>
                )}
                {!this.state.is_next && (
                    <View
                        style={{
                            alignItems: 'center',
                            justifyContent: 'flex-start',
                        }}>
                        <View style={{width: '100%', height: 1, backgroundColor: '#EEEEEE', marginTop: 20}} />
                        <Text
                            style={{
                                color: '#999999',
                                fontSize: 14,
                                marginTop: 10,
                                marginBottom: 15,
                            }}>
                            没有更多数据了
                        </Text>
                    </View>
                )}
            </>
        );
    }
    _renderItem(item) {
        return (
            <>
                <WhiteSpace />
                <Item
                    onPress={() => {
                        this.props.navigation.push('HVideo', {
                            id: item.id,
                            link: item.link,
                            title: item.title,
                            cover: this.state.url + item.thumbs[0],
                        });
                    }}>
                    <Flex style={{flex: 1}}>
                        <Flex style={{width: '60%', height: 112}} justify="around" align="start" direction="column">
                            <Text style={{fontSize: 16, marginBottom: 10}}>{item.title}</Text>
                            <Flex align="center">
                                <Image style={{width: 15, height: 15}} source={require('~/assets/my/time2x.png')} />
                                <Text style={{fontSize: 12, color: '#999999', paddingLeft: 6.5}}>
                                    {moment(item.datetime).format('YYYY.MM.DD HH:mm')}
                                </Text>
                            </Flex>
                        </Flex>
                        <View style={styles.images}>
                            <Image style={styles.images} source={{uri: this.state.url + item.thumbs[0]}} />
                        </View>
                    </Flex>
                </Item>
            </>
        );
    }
    render() {
        return (
            <View style={{flex: 1, backgroundColor: '#f5f5f9'}}>
                <List>
                    <FlatList
                        data={this.state.list}
                        showsVerticalScrollIndicator={false}
                        renderItem={(data) => this._renderItem(data.item)}
                        keyExtractor={(item, idx) => idx}
                        ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                        onEndReached={() => {
                            this.loadData();
                        }}
                        onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                        refreshing={true}
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.refreshing}
                                onRefresh={() => {
                                    this._onRefresh();
                                }}
                            />
                        }
                    />
                </List>
            </View>
        );
    }
}
export default connect(mapGetter)(VideoPark);
const styles = StyleSheet.create({
    images: {
        width: 110,
        height: 82.5,
        resizeMode: 'stretch',
        borderWidth: 0.3,
        borderColor: '#FFFFFF',
        borderRadius: 15,
        marginLeft: 10,
        marginBottom: 10,
    },
    image: {
        width: 110,
        height: 82.5,
        resizeMode: 'stretch',
        marginBottom: 15,
        borderWidth: 0.3,
        borderColor: '#FFFFFF',
        borderRadius: 15,
        marginTop: 10,
        marginLeft: 10,
    },
});
